import React, { useState, useEffect } from 'react';
import { history } from 'umi'
import { Tabs, Card, Button, Form, Input, Table, Tag, Select } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'

import OperaPrompt from '@/components/OperaPrompt'
import request from '@/utils/request'

const { TabPane } = Tabs;

const tabList = [
    {
        title: "全部",
        key: "0",
    },
    {
        title: "已领取",
        key: "1",
    },
    {
        title: "已使用",
        key: "2",
    },
    {
        title: "已过期",
        key: "3",
    },
];

const index = (props: any) => {
    const { match } = props
    const [tabKey, setTabKey] = useState("0")
    const [tableData, setTableData] = useState({
        list: [
            {
                id: 1,
                coupon_title: "欢乐大放送优惠卷",
                coupon_type: "满减",
                discount_amount: "18.50",
                publish_num: 99,
                max_buy: 2,
                expired_time: "2020-06-04 12:32:00",
                status_title: "进行中"
            }
        ], total: 0
    })
    const [current, setCurrent] = useState(1)

    const columns: any = [
        {
            title: '优惠券名称',
            dataIndex: 'coupon_title',
            render: (text: any) => text,
        },
        {
            title: '领取人',
            dataIndex: 'member_name',
            render: (text: any) => text,
        },
        {
            title: '优惠码',
            dataIndex: 'code',
            render: (text: any) => text,
        },
        {
            title: '面额',
            dataIndex: 'amount',
            render: (text: any) => text,
            align: "center",
        },

        {
            title: '获取方式',
            dataIndex: 'get_way_title',
            render: (text: any) => <Tag color="success">{text}</Tag>,
            align: "center",
            width: "120px",
        },
        {
            title: '状态',
            dataIndex: 'status_title',
            render: (text: any) => <Tag color="blue">{text}</Tag>,
            align: "center",
            width: "120px",
        },
        {
            title: '领取时间',
            dataIndex: 'fetch_time',
            width: "260px",
            render: (text: any, record: any) => <Tag color="green"> {text}</Tag>,
        },
        {
            title: '使用时间',
            width: "120px",
            dataIndex: 'use_time',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        }
    ];

    const getList = (params: any = {}) => {
        request(`/promote/coupon-receiver-list?couponId=${match.params.couponId}`, {
            params: { pageSize: 10, current, ...params },
        }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total });
        })
    };

    useEffect(() => {
        getList()
    }, [])

    return (
        <PageHeaderWrapper title={false}>
            <Card bordered={false}>
                <OperaPrompt dataList={[
                    "查看优惠券领取详情",
                ]} />

                <div style={{ padding: "5px 0" }}>
                    <Button onClick={() => { history.goBack() }}>返回</Button>
                </div>
                <Tabs activeKey={tabKey} onChange={(activeKey) => {
                    setTabKey(activeKey)
                }}>

                    {
                        tabList.map((item: any) =>
                            <TabPane tab={item.title} key={item.key} style={{ outline: "none" }}>
                                {
                                    tabKey === item.key &&
                                    <Table
                                        rowKey="id"
                                        columns={columns}
                                        dataSource={tableData.list}
                                    />
                                }

                            </TabPane>
                        )
                    }

                </Tabs>
            </Card>
        </PageHeaderWrapper>
    );
};

export default index;